<template>
  <section>
    <!-- tool bar -->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.param1" placeholder="标的名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="q">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <!-- list -->
    <el-table :data="loans" highlight-current-row border v-loading="loading" style="width: 100%;">
      <el-table-column prop="project_no" label="项目id" width="150"></el-table-column>
      <el-table-column prop="loan_name" label="标的名称" width="200"></el-table-column>
      <el-table-column prop="create_time" label="标的创建日期" width="200"></el-table-column>
      <el-table-column prop="loan_user_id" label="借款人id" width="120"></el-table-column>
      <el-table-column prop="loan_user_name" label="借款人姓名" width="120"></el-table-column>
      <el-table-column prop="loan_full_status" label="满标状态" width="100" :formatter="formatIsFull"></el-table-column>
      <el-table-column label="操作" width="120">
        <template scope="scope">
          <el-button type="primary" size="small" v-if="scope.row.loan_full_status == '1'" @click="submit(scope.$index, scope.row)">可审核</el-button>
          <el-button type="danger" size="small" v-else :disabled="true">尚未满标</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination -->
    <el-col :span="24" class="toolbar">
      <el-pagination class="pagination" layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="handleChange">
      </el-pagination>
    </el-col>
  </section>
</template>
<script>
  import {
    mapGetters,
    mapActions
  } from 'vuex'

  export default {
    computed: {
      ...mapGetters([
        'loans',
        'loading',
        'pageSize',
        'total',
      ]),
    },

    data() {
      return {
        filters: {
          param1: ''
        },
      }
    },

    methods: {
      ...mapActions([
        'getLoans',
        'checkLoan',
        'query',
        'forbiddenSubmit'
      ]),
      /**
       * 满标状态formatter
       */
      formatIsFull(row, column) {
        return row.loan_full_status == 1 ? '已满标' : '尚未满标'
      },
      /**
       * 条件查询
       */
      q() {
        this.query({
          vm: this
        })
      },
      /**
       * 禁止提交
       */
      forbiddenSubmit() {
        this.$notify({
          title: '提示',
          message: '此标的投资金额未满',
          type: 'warning'
        })
      },
      /**
       * 提交审核
       * @param  {[type]} index [description]
       * @param  {[type]} row   [description]
       * @return {[type]}       [description]
       */
      submit(index, row) {
        this.$confirm('是否审核此表的', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          closeOnPressEscape: false,
          type: 'info'
        }).then(() => {
          this.checkLoan({
            vm: this,
            params: row,
            cb: () => {
              this.getLoans({
                vm: this
              })
            }
          })
        }).catch(() => {})
      },
      handleChange(val) {
        console.log(val)
        this.getLoans({
          vm: this,
          page: val
        })
      }
    },

    mounted() {
      this.getLoans({
        vm: this
      })
    }
  }
</script>
<style style="scss">
</style>